<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/static/admin/lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="/static/admin/css/public.css" media="all">
    <link rel="stylesheet" href="/static/admin/js/lay-module/layui_ext/dtree/dtree.css" media="all">
    <link rel="stylesheet" href="/static/admin/js/lay-module/layui_ext/dtree/font/dtreefont.css" media="all">
    <link rel="stylesheet" href="/static/admin/lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">

</head>
<style>
    #dept_tree{
        position:relative;
        top:15px;
        border: 1px;
        solid-color: #8c8c8c;
        border-radius: 10px;
        overflow:auto;
    }
    #addicon{
        position: relative;
        left: 26px;
        color: #FFFFFF;
        z-index:99;/*显示等级（数字越大优先级越高）*/
    }
    #addbox.layui-form{
        width: 600px;
    }
    #editbox.layui-form{
        width: 600px;
    }
    .layui-icon-file:before {
        content: "+";
    }
</style>
<body>
<div class="layuimini-container">

        <!--<div align="center" style="background: #0395e1;width: 100px;height: 400px;">内<br>容<br>&nbsp;<br>侧<br>栏</div>
        <div style="background: darkorchid;width: 400px;height: 400px;line-height: 400px">主要内容</div>-->
    <div class="layui-row layui-col-space20" >
    <!--树形结构-->
    <div id="dept_tree"
         class="layui-col-md2">
        <ul id="siteTree" class="dtree" data-id="0"></ul>
    </div>
    <div class="layui-col-md10">

        <!--头部组件-->
        <script type="text/html" id="siteall">
                <form class="layui-form layui-form-pane" action="" id="tool">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">网点名称</label>
                            <div class="layui-input-inline">
                                <input type="text" name="username" autocomplete="off" class="layui-input" id="siteName">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button type="submit" class="layui-btn layui-btn-primary"  lay-submit lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button>
                            <!--<i class="fa fa-plus-circle"></i><i class="layui-icon layui-icon-face-smile"></i>-->
                            <i class="fa fa-arrows-alt" style="color: #FFFFFF" id="addicon"></i>
                            <input type="button" style="width: 80px;height: 37px" class="layui-btn layui-btn-normal layui-btn-sm data-add-btn " lay-event="addsite" value="  添加">
                            <!--<button style="width: 80px;height: 37px" class="layui-btn layui-btn-normal layui-btn-sm data-add-btn " lay-event="addsite"> 添加 </button>-->

                            <button style="width: 80px;height: 37px" class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="delete" date-type="delete"><i class="fa fa-remove"></i> 停用 </button>
                        </div>
                    </div>
                </form>
        </script>

        <!--网点表格-->
        <table class="layui-hide" id="currentTableId" lay-filter="employeeTableFilter">
        <!--表格按钮-->
        <script type="text/html"  id="currentTableBar">
            <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="editsite" >编辑</a>
            <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="deletesite" >停用</a>
        </script>
        </table>
    </div>
    </div>

</div>

<!--  添加 表单-->
<div class="layui-form layuimini-form" id="addbox" style="display:none;">
    <hr/>
    <div class="layui-form-item">
        <label class="layui-form-label required">编号</label>
        <div class="layui-input-block">
            <input type="number" name="siteCode" id="siteCodes" lay-verify="required" lay-reqtext="编号不能为空" placeholder="请输入编号" value="" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">名称</label>
        <div class="layui-input-block">
            <input type="text" name="siteName" id="siteNames" lay-verify="required" lay-reqtext="名称不能为空" placeholder="请输入名称" value="" class="layui-input">
            <tip>填写自己网点的名称</tip>
        </div>
    </div>
    <div class="layui-form-item" id="area-picker">
        <div class="layui-form-label required">网点地址</div>
        <div class="layui-input-inline" style="width: 130px;">
            <select name="province" class="province-selector" data-value="广东省" lay-filter="province-1">
                <option value="">请选择省</option>
            </select>
        </div>
        <div class="layui-input-inline" style="width: 130px;">
            <select name="city" class="city-selector" data-value="深圳市" lay-filter="city-1">
                <option value="">请选择市</option>
            </select>
        </div>
        <div class="layui-input-inline" style="width: 130px;">
            <select name="county" class="county-selector" data-value="龙岗区" lay-filter="county-1">
                <option value="">请选择区</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">营业店具体地址</label>
        <div class="layui-input-block">
            <input type="text" name="address" id="addresss" lay-verify="required" lay-reqtext="地址不能为空" placeholder="请输入地址"  value="" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">营业店客服电话</label>
        <div class="layui-input-block">
            <input type="number" name="serviceTel" id="serviceTels" lay-verify="required" class="layui-input" placeholder="请填写电话">
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">所属员工</label>
        <div class="layui-input-block" style="width: 20%;">
            <select class="ui-input-class" id="employeeId"  name="employeeId"  lay-verify="required">
            </select>
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">备注</label>
        <div class="layui-input-block">
            <input type="text" name="applyRemark" id="applyRemarks" lay-verify="required" class="layui-input" placeholder="请填写备注">
            <tip>填写自己网点的备注</tip>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认添加</button>
        </div>
    </div>
</div>




<!--  编辑 表单-->
<div class="layui-form layuimini-form" id="editbox" style="display:none;">
    <hr/>
    <div class="layui-form-item">
        <label class="layui-form-label required">编号</label>
        <div class="layui-input-block">
            <input type="number" name="siteCode"id="siteCode" lay-verify="required" lay-reqtext="编号不能为空" placeholder="请输入编号" value="" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">名称</label>
        <div class="layui-input-block">
            <input type="text" name="siteName" id="name" lay-verify="required" lay-reqtext="名称不能为空" placeholder="请输入名称" value="" class="layui-input">
            <tip>修改自己网点的名称</tip>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">营业店具体地址</label>
        <div class="layui-input-block">
            <input type="text" name="address" id="address" lay-verify="required" lay-reqtext="地址不能为空" placeholder="请输入地址"  value="" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">营业店客服电话</label>
        <div class="layui-input-block">
            <input type="number" name="serviceTel" id="serviceTel" lay-verify="required" class="layui-input" placeholder="请填写电话">
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">所属员工</label>
        <div class="layui-input-block" style="width: 20%;">
            <select class="ui-input-class" id="employeeIdTwo" name="employeeId"  lay-verify="required">
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn layui-btn-normal" lay-submit lay-filter="updateBtn">确认修改</button>
        </div>
    </div>
</div>



<script src="/static/admin/lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script>
    //配置插件目录
    layui.config({
        base: '/static/admin/js/lay-module/layarea/'
        , version: '1.0'
    });

    layui.use(['form', 'table','layarea'], function () {
        var siteid;
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table;
        var layarea = layui.layarea;
        var dtree = layui.dtree, layer = layui.layer, $ = layui.jquery;

        table.render({
            elem: '#currentTableId',
            url: '/admin/site/querySiteAll',
            toolbar: '#siteall',
            defaultToolbar: ['filter', 'exports', 'print', {
                title: '提示',
                layEvent: 'LAYTABLE_TIPS',
                icon: 'layui-icon-tips'
            }],
            cols: [
                [
                {type: "radio", width: 50},
                {field: 'siteId',  title: 'siteId', sort: true,width:1},
                {field: 'siteCode', title: '网点编号'},
                {field: 'siteName', title: '网点名称', sort: true},
                //{field: 'startTime',  title: 'startTime'},
                //{field: 'endTime', title: 'endTime'},
                {field: 'areaName', title: '行政区域名称', sort: true},
                {field: 'address', title: '具体地址', sort: true},
                {field: 'serviceTel', title: '客服电话', sort: true,width: 100},
                {field: 'staffName', title: '所属员工', sort: true,width: 100},
                {field: 'createTime', title: '创建时间', sort: true},
                {title: '操作', minWidth: 150, toolbar: '#currentTableBar', align: "center"}
            ]
            ],
            done:function(res,curr,count){ // 隐藏列
                $(".layui-table-box").find("[data-field='siteId']").css("display","none");
            },
            limits: [20, 30, 40, 50, 60, 100],
            limit: 20,
            page: true,
            skin: 'line'
        });


        // 监听搜索操作
        form.on('submit(data-search-btn)', function (data) {
            var result = JSON.stringify(data.field);

            //执行搜索重载
            table.reload('currentTableId', {
                page: {
                    curr: 1
                }
                , where: {
                    siteName:$("#siteName").val()
                }
            }, 'data');

            return false;
        });
        //监听表单提交
        form.on('submit(saveBtn)', function(data){
            console.log(data);
            $.ajax({
                url:'/admin/site/addtSite',
                type:'post',
                data:data.field,
                dataType:'json',
                success:function (res) {
                    layer.closeAll('page'); //关闭所有页面层

                    layer.msg(res.message)
                    //刷新表格
                    table.reload('currentTableId', {
                        url: '/admin/site/querySiteAll'
                    });
                }
            })
            return false;
        });

        //列事件(编辑，删除)
        table.on('tool(employeeTableFilter)', function(obj){
            var data = obj.data;
            if(obj.event === 'deletesite'){
                layer.confirm('真的移除么', function(index){
                    deleteSite(data.siteId);
                    obj.del();
                    layer.close(index);
                });
                //获取id
                //layer.msg('ID：'+ data.siteId + ' 的删除');
            } else if(obj.event === 'editsite'){
                //layer.msg('ID：'+ data.siteId + ' 编辑');
                var siteDate;
                siteDate=getSiteById(data.siteId);
                var index = layer.open({
                    title: '修改网点',
                    type: 1,
                    area: ['73%', '87%'],
                    content: $('#editbox'),
                    success:function(res){
                        $("#siteCode").val(siteDate.siteCode);
                        $("#name").val(siteDate.siteName);
                        $("#serviceTel").val(siteDate.serviceTel);
                        $("#address").val(siteDate.address);

                        //修改页面员工下拉菜单
                        $.ajax({
                            url:'/admin/site/queryAllEmployee',
                            type:'get',
                            dataType:'json',
                            success:function(data){
                                /*form.render();// 因为是动态写入的数据所以需要先渲染表单再进行以下步骤
                                var select = 'dd[lay-value=' + siteDate.staffName + ']';// 设置value
                                $('#employeeIdTwo').siblings("div.layui-form-select").find('dl').find(select).click();
                                $('#employeeIdTwo').prop("disabled", "disabled");
                                form.render('select');// 再次渲染select*/

                                for(var i = 0; i < data.length; i++){
                                    $('#employeeIdTwo').append(new Option(data[i].employeeName,data[i].employeeId));
                                }
                                $("#employeeIdTwo option[value="+siteDate.employeeId+"]").prop("selected", true);
                                layui.form.render("select");
                            }
                        })
                    }

                })
            }
        });

        //表格点击操作(添加，删除)
        table.on('toolbar(employeeTableFilter)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'addsite':

                    var index = layer.open({
                        title: '添加网点',
                        type: 1,
                        area: ['73%', '95%'],
                        content: $('#addbox'),
                        success:function(res){
                            $("#siteCodes").val("");
                            $("#siteNames").val("");
                            $("#addresss").val("");
                            $("#serviceTels").val("");
                            $("#applyRemarks").val("");
                            //刷新出地区联动下拉框
                            layarea.render({
                                elem: '#area-picker',
                                change: function (res) {
                                    //console.log(res);
                                }
                            });
                            //新增页面员工下拉菜单
                            $.ajax({
                                url:'/admin/site/queryAllEmployee',
                                type:'get',
                                dataType:'json',
                                success:function(data){
                                    for(var i = 0; i < data.length; i++){
                                        $('#employeeId').append(new Option(data[i].employeeName,data[i].employeeId));
                                    }
                                    layui.form.render("select");
                                }
                            })

                        }
                    });
                    $(window).on("resize", function () {
                        layer.full(index);
                    });
                    break;


                case 'delete':
                    layer.confirm('确定要删除网点信息吗？', function (index) {
                        deleteSite(siteid);
                    })
                    break;


                case '':
                    break;
            };
        });

        //监听表格单选框选择
        table.on('radio(employeeTableFilter)', function(obj){
            siteid=obj.data.siteId;
            //layer.msg(siteid);
        });

        //删除数据方法
        function deleteSite(siteId){
            //删除网点信息
            $.ajax({
                url:'/admin/site/deleteSite',
                type:'post',
                data:{
                    siteId:siteId
                },
                dataType:'json',
                success:function (res) {
                    layer.msg(res.message)
                    //刷新表格
                    table.reload('currentTableId', {
                        data:getData(obj.data.id)
                    });
                }
            })
        }


        //树形组件
        layui.use(['tree', 'util'], function() {
            var tree = layui.tree;
            var util = layui.util;
            tree.render({
                elem: '#dept_tree',
                data: getData(),
                id: 'treeId',
                //showCheckbox: true,     //是否显示复选框
                onlyIconControl: true
                ,click: function(obj){

                    console.log(obj.data); //得到当前点击的节点数据
                    console.log(obj.state); //得到当前节点的展开状态：open、close、normal
                    console.log(obj.elem); //得到当前节点元素

                    console.log(obj.data.children); //当前节点下是否有子节点

                    //可以重载所有基础参数
                    tree.reload('treeId', {
                        data:getData(obj.data.id)
                    });

                }
            });
        });


        //获根据ID查询网点
        function getSiteById(id){
            var data = [];
            $.ajax({
                url: "/admin/site/querySiteById",    //后台数据请求地址
                type: "get",
                data:{
                    siteId:id
                },
                async:false,
                success: function(resut){
                    data = resut;
                }
            });
            return data;
        }

        //获取网点数据(动态sql)
        function getData(id){
            var data = [];
            $.ajax({
                url: "/admin/site/getData",    //后台数据请求地址
                type: "post",
                data:{
                    id:id
                },
                async:false,
                success: function(resut){
                    data = resut;
                }
            });
            return data;
        }




    })
</script>

</body>
</html>
